import { getInstructionVersion, getProject, listRuns } from "@autoscholar/core";
import Link from "next/link";
import { notFound } from "next/navigation";
import { CodeBlock } from "@/components/CodeBlock";
import { MarkdownView } from "@/components/MarkdownView";
import { StatusBadge } from "@/components/StatusBadge";
import { disciplineLabel, fmtDateTime, fmtUsd } from "@/lib/format";
import { db } from "@/lib/server/db";

export const dynamic = "force-dynamic";

export default async function ProjectDetail({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ v?: string }>;
}) {
  const { id } = await params;
  const { v } = await searchParams;
  const d = db();
  let data: Awaited<ReturnType<typeof getProject>>;
  try {
    data = await getProject(d, id);
  } catch {
    notFound();
  }
  const runs = await listRuns(d, { projectId: id, limit: 50 });
  const selected = v
    ? await getInstructionVersion(d, v).catch(() => null)
    : data.versions[0]
      ? await getInstructionVersion(d, data.versions[0].id)
      : null;
  return (
    <div className="space-y-6">
      <header>
        <p className="eyebrow">
          <Link href="/admin/projects">Projects</Link>
        </p>
        <h1 className="title-2 mt-1">{data.project.title}</h1>
        <p className="muted text-sm">
          {disciplineLabel(data.project.discipline)} · {data.project.description || "no description"}
        </p>
      </header>
      <div className="grid gap-6 lg:grid-cols-12">
        <section className="surface p-4 lg:col-span-4">
          <h2 className="title-3">Instruction versions</h2>
          <ul className="mt-2 space-y-2 text-sm">
            {data.versions.length === 0 && <li className="muted">None uploaded.</li>}
            {data.versions.map((iv) => (
              <li
                key={iv.id}
                className={`rounded-md border p-2 hairline ${selected?.id === iv.id ? "bg-[var(--bg-muted)]" : ""}`}
              >
                <Link href={`/admin/projects/${id}?v=${iv.id}`}>
                  v{iv.version} · {iv.filename}
                </Link>
                <p className="subtle font-mono text-xs">
                  {iv.sha256.slice(0, 16)} · {iv.byteSize} B · {fmtDateTime(iv.createdAt)}
                </p>
                {iv.note && <p className="muted text-xs">{iv.note}</p>}
                <Link href={`/admin/new?project=${id}`} className="btn btn-sm mt-2">
                  Re-run / duplicate
                </Link>
              </li>
            ))}
          </ul>
          <h2 className="serif mt-6 text-lg font-semibold">Runs</h2>
          <ul className="mt-2 space-y-1 text-sm">
            {runs.length === 0 && <li className="muted">No runs.</li>}
            {runs.map((r) => (
              <li key={r.id} className="flex items-center justify-between gap-2">
                <Link href={`/admin/runs/${r.id}`}>{r.title}</Link>
                <span className="flex items-center gap-2">
                  <StatusBadge status={r.status} />
                  <span className="subtle text-xs">{fmtUsd(r.totalCostUsd)}</span>
                </span>
              </li>
            ))}
          </ul>
        </section>
        <section className="lg:col-span-8">
          {selected ? (
            <div className="space-y-3">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <h2 className="title-3">Instruction v{selected.version} (immutable)</h2>
                <span className="font-mono text-xs break-all">{selected.sha256}</span>
              </div>
              {selected.frontmatter && (
                <CodeBlock
                  code={JSON.stringify(selected.frontmatter, null, 2)}
                  lang="json"
                  maxHeight="10rem"
                />
              )}
              <details open className="surface p-4">
                <summary className="cursor-pointer text-sm">Rendered preview (sanitized)</summary>
                <div className="mt-3">
                  <MarkdownView markdown={selected.contentText} />
                </div>
              </details>
              <details className="surface p-4">
                <summary className="cursor-pointer text-sm">Raw text</summary>
                <CodeBlock code={selected.contentText} lang="md" />
              </details>
            </div>
          ) : (
            <p className="muted">Select a version.</p>
          )}
        </section>
      </div>
    </div>
  );
}